<template>
  <div class="leader">
    <Skeleton :loading="props.loading">
      <template #ske>
        <div style="width: 100%">
          <van-skeleton-paragraph style="width: 70%; height: 40px; margin: 0px 0px 20px 0" />
          <van-skeleton-paragraph style="width: 100%; height: 80px; margin: 0px 0px 10px 0" />
          <van-skeleton-paragraph style="width: 100%; height: 40px; margin: 15px 0 0px 0" />
        </div>
      </template>
      <template #main>
        <div class="twobtn">
          <span v-for="(item, index) in btns" @click="initData(index, index)"
            :class="btnindex == index ? 'active' : ''">
            {{ $t(item) }}
          </span>
        </div>
        <table>
          <thead>
            <tr>
              <th>{{ $t("language.Share.leader.head1") }}</th>
              <th>{{ $t("language.Share.leader.head2") }}</th>
              <th>{{ $t("language.Share.leader.head3") }}</th>
              <th>{{ $t("language.Share.leader.head4") }}</th>
              <th>{{ $t("language.Share.leader.head5") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr  v-for="(item, index) in rank.list" :key="index">
              <td :height="[0,1,2].includes(index)?53:''">
                <img v-if="index == 0" src="@/assets/img/l1.png" alt="" />
                <img v-else-if="index == 1" src="@/assets/img/l2.png" alt="" />
                <img v-else-if="index == 2" src="@/assets/img/l3.png" alt="" />
                <template  v-else>{{index+1}}</template>
              </td>
              <td>{{ item.gameId }}</td>
              <td>{{ item.nickname }}</td>
              <td>{{ item.spreaderId }}</td>
              <td>{{ item.coins }}</td>
            </tr>
          </tbody>
        </table>
      </template>
    </Skeleton>
  </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref, getCurrentInstance } from "vue";
let btns = reactive(["language.Share.leader.btn1", "language.Share.leader.btn2"]);
let btnindex = ref(0);
let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
const { proxy } = getCurrentInstance();
//获取推广明细
let info = JSON.parse(localStorage.getItem("info"));

let rankform = reactive({
  pageIndex: 1,
  pageSize: 50,
  id: info.gameID,
  pageType: 0
})
let rank = reactive({
  list:[]
})
let initData = (index, pageType) => {
  btnindex.value = index
  // rankform.pageType = pageType
  
  proxy.$post(`/UserCenter/v1.0/Promotion/Share/Rank`, rankform).then(({ data }) => {
    rank.list=data.data.rankings
    // nextTick(() => {
    //   detail.members = data.data.members
    // })
  })
}
initData(0, "")
</script>

<style scoped lang="scss">
.leader {
  width: 100%;
  padding: 0 10px;


  .twobtn {
    @include flex(row, flex-start, center);
    margin-top: 10px;
    border-radius: 5px;

    span {
      color: #b5bac8;
      font-size: 14px;
      background-color: #4a4c53;
    }

    span:nth-child(1) {
      padding: 8px;

      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    span:nth-child(2) {
      padding: 8px;

      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .active {
      background-color: #0a906c;
      color: #fff;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    padding: 0;
    border: 1px solid #3d4148;
    

    thead {
      height: 65px;

      th {
        text-align: center;
        font-size: 14px;
        color: #b5bac8;
        height: 100%;
        padding: 8px;
        line-height: 24px;
        font-weight: bold;
        background-color: rgb(61, 65, 72);
        border: 1px solid #4b4e55;
      }
    }



    tbody {
      width: 100%;
      height: 400px;
      overflow: auto;
    }

    tr {
     

      td {
        text-align: center;
        font-size: 14px;
        color: #b5bac8;
        padding:4px 8px;

        border: 1px solid #3d4148;

        img {
          width: 40px;
        }
      }
    }


  }
}
</style>
